<script>
//编辑组件右侧
import ChartConfig from '../../../workspace/chartconfig/ChartConfig';
import ConfigFactory from '../../../workspace/chartconfig/config/config-factory';

import ChartType from '../../chartconfig/ChartType';
import * as types from '@/store/types';

export default {
  name: 'CardEditRightSider',
  components: {
    ChartConfig,
    ChartType,
  },
  data() {
    return {
      chartType: '',
    };
  },
  computed: {
    allControl() {
      return this.$store.getters.controls;
    },
    renderType() {
      if (this.$store.getters.currentId !== '') {
        return this.allControl[this.$store.getters.currentId].appearance.configType;
      } else {
        return '';
      }
    },
    dataBinder() {
      let metrics = [];
      let dimension = [];
      if (this.$store.getters.currentId !== '') {
        metrics = this.allControl[this.$store.getters.currentId].options.settings.metrics;
        dimension = this.allControl[this.$store.getters.currentId].options.settings.dimension;
      }
      return {
        metrics,
        dimension,
      };
    },
  },
  watch: {
    renderType(value) {
      if (this.dataBinder.metrics.length > 0 && this.dataBinder.dimension.length > 0) {
        this.initChartConfig();
        this.chartType = value;
      }
    },
    dataBinder(value) {
      if (
        this.renderType &&
        this.dataBinder.metrics.length > 0 &&
        this.dataBinder.dimension.length > 0
      ) {
        // this.updateChartConfig();
      } else {
        //this.resetChartConfig();
      }
    },
  },
  created() {
    if (
      this.renderType &&
      this.dataBinder.metrics.length > 0 &&
      this.dataBinder.dimension.length > 0
    ) {
      let chartData = this.allControl[this.$store.getters.currentId];
      if (Object.keys(chartData.options.extend) == 0) {
        this.initChartConfig();
      }
      this.chartType = this.renderType;
    }
  },
  methods: {
    getChartType(item) {
      if (this.$store.getters.currentId !== '') {
        this.chartData = this.allControl[this.$store.getters.currentId];
        this.chartData.appearance.type = item.type;
        this.chartData.appearance.configType = item.configType;
        this.$store.commit(types.UPDATE_CHART_CONFIG, {
          data: { [this.$store.getters.currentId]: this.chartData },
        });
      }
    },
    initChartConfig() {
      let chartData = this.allControl[this.$store.getters.currentId];
      let metrics = chartData.options.settings.metrics;
      let dimension = chartData.options.settings.dimension;
      let dataType = chartData.appearance.configType;
      let config = ConfigFactory.getChartConfig(dataType, metrics, dimension);
      chartData.options.settings = config.settings;
      chartData.options.extend = config.extend;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: chartData },
      });
    },
    updateChartConfig() {
      let chartData = this.allControl[this.$store.getters.currentId];
      let config = ConfigFactory.updateOptions(chartData.options);
      chartData.options.settings = config.settings;
      chartData.options.extend = config.extend;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: chartData },
      });
    },
    resetChartConfig() {
      let chartData = this.allControl[this.$store.getters.currentId];
      chartData.options.extend.series = [];
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: chartData },
      });
    },
  },
};
</script>
<template>
  <div class="datav-rightside">
    <ChartType @on-selectChartType="getChartType"></ChartType>
    <div
      class="datav-chartconfig">
      <p>图表配置</p>
      <ChartConfig :chart-type="chartType"></ChartConfig>
    </div>
  </div>
</template>
<style lang="less" scoped>
.datav-rightside {
  height: calc(~'100vh');

  .chart-componet {
    height: calc(~'100vh - 300px');
  }

  .datav-chartconfig {
    p {
      margin: 10px;
    }
  }
}
</style>
